<template>
  <div class="box">
      <div>
          <search type="回路" @searchValue="searchValue"></search>
      </div>
    <el-table :data="loop" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100px"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="specFreq" label="额定电压"></el-table-column>
      <el-table-column prop="specVoltage" label="额定功率"></el-table-column>
      <el-table-column prop="specVoltage" label="额定交流频率"></el-table-column>
      <el-table-column prop="memo" label="描述"></el-table-column>
    </el-table>
      <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[5,10]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
          </div>
  </div>
</template>
<script>
import  search from  "./tableSearch"
export default {
  props:["EQU_Type"],
    components:{
      search
    },
  data() {
    return {
      loop:[],
      total:0,
      size:10,
      page:1,
    };
  },   
  mounted() {
      this.up_loop()
    },
  methods: {
    searchValue(e){
       this.name=e
       this.page=1
       this.up_loop()
    },
    handleSizeChange(e){
        this.size=e
        this.up_loop()
    },
    handleCurrentChange(e){
      this.page=e
      this.up_loop()
    },
    up_loop(){
      this.$http.get("/api/threesuns/imcDevs",{params:{
        devType:this.EQU_Type.devType || 0,
        imcType:this.EQU_Type.imcType || 0,
        name:this.name,
        page:this.page,
        size:this.size
      }}).then(res=>{
        if(res.data.data){
           this.total=res.data.total
           this.loop=res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    }
  }
};
</script>
<style scoped>
.box {
    height: 100%;
}
.block {
    margin-top: 10px;
    text-align: center;
}
/deep/.el-pagination .btn-prev,
/deep/ .el-pagination .btn-next {
    background: #011615;
    text-align: center;
}
</style>